<template>
    <div>
        <section class="l-container">
            <div class="l-box">
                <div class="l-list">
                    <div class="l-window"></div>
                    <div class="l-right">
                        <div class="l-title">08月12日 星期二</div>
                        <ul class="l-items">
                            <li class="l-item" v-for="item in 10">
                                <i class="l-icon"></i>
                                <p class="l-text row1">直播直播直播直播直播直播直播直播直播直播直播直播</p>
                                <span class="l-date">17:00</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="l-content">
                <div class="top">
                    <h3 class="top-title">精美直播课</h3>
                    <ul class="top-items" v-if="!isPhone">
                        <li class="top-item" v-for="item in 5">小升初</li>
                    </ul>
                </div>
                <ul class="service-items">
                    <li class="service-item" v-for="item in 10">
                        <div class="s-cover"></div>
                        <div class="s-info">
                            <p class="s-title row2">深圳小成sad发生地方23我12312是的发送到发送到2</p>
                            <div class="s-bottom">
                                <span class=" s-count">主讲人：夏老师</span>
                                <span class="s-price">2200人已买 </span>
                            </div>

                        </div>
                    </li>
                </ul>
            </div>
            <div class="b">
                <h3>大神级讲师都在这里</h3>
                <p v-if="!isPhone">专业讲师为你带来详细讲解，助力您的孩子升学无忧</p>
            </div>
            <div class="swiper-box">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><img src="../../public/images/work_1-cover.png" alt=""></div>
                        <div class="swiper-slide"><img src="../../public/images/work_1-cover.png" alt=""></div>
                        <div class="swiper-slide"><img src="../../public/images/work_1-cover.png" alt=""></div>
                        <div class="swiper-slide"><img src="../../public/images/work_1-cover.png" alt=""></div>
                        <div class="swiper-slide"><img src="../../public/images/work_1-cover.png" alt=""></div>
                        <div class="swiper-slide"><img src="../../public/images/work_1-cover.png" alt=""></div>
                        <div class="swiper-slide"><img src="../../public/images/work_1-cover.png" alt=""></div>
                        <div class="swiper-slide"><img src="../../public/images/work_1-cover.png" alt=""></div>
                    </div>
                </div>
                <div class="prev-btn"></div>
                <div class="next-btn"></div>
            </div>

        </section>
    </div>
</template>

<script>
    import {mapState} from 'vuex'

    export default {
        name: "LiveStudio",
        computed: {
            ...mapState(['isPhone'])
        },
        mounted() {
            let viewCount = this.isPhone ? 3 : 5
            var mySwiper = new Swiper('.swiper-container', {
                slidesPerView: viewCount,
                spaceBetween: 20,
//spaceBetween : '10%',按container的百分比
            })
        }
    }
</script>

<style scoped lang="scss">

    .l-container {
        margin-top: 55px;
    }

    .l-box {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 619px;
        max-height: 619px;
        background: url("../../public/images/live-bg.png") no-repeat;
        background-size: cover;
    }

    .l-list {
        display: flex;
        width: 1200px;
        height: 526px;
        min-width: 900px;
        .l-window {
            width: 75%;
            height: 100%;
            background: blue;
        }
        .l-right {
            flex: 1;
            display: flex;
            flex-direction: column;
            background: #2B333B;
            .l-title {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 52px;
                background: #485461;
                color: #fff;
                font-size: 14px;
            }
            .l-items {
                flex: 1;
                height: 100%;
                overflow-y: auto;
            }
            .l-item {
                display: flex;
                align-items: center;
                height: 49px;
                color: #AAADB1;
                font-size: 13px;
                padding: 0 18px 0 20px;
                &-active {
                    background: #101C29;
                }
                .l-icon {
                    display: inline-flex;
                    width: 16px;
                    height: 16px;
                    background: url("../../public/images/live-ico.png");
                    background-size: 100% 100%;
                }
                .l-text {
                    flex: 1;
                    padding: 0 15px;
                }
            }
        }
    }

    .l-content {
        padding-bottom: 30px;
        background: #fff;
        .top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 100px;
            width: 1200px;
            margin: 0 auto;
            padding-top: 50px;
            .top-title {
                font-size: 24px;

            }
            .top-items {
                display: flex;
            }
            .top-item {
                margin-left: 40px;
                font-size: 13px;
                color: #646464;
            }
        }
    }

    .service-items {
        display: flex;
        flex-wrap: wrap;
        width: 1200px;
        margin: 0 auto;
        .service-item {
            display: flex;
            flex-direction: column;
            width: 25%;
            height: 254px;
            padding: 0 8px;
            margin-top: 20px;
            border-radius: 10px;
            &:nth-child(4n) {
                padding-right: 0;
            }
            &:nth-child(4n+1) {
                padding-left: 0;
            }
            .s-cover {
                width: 100%;
                height: 157px;
                background: url("../../public/images/home-bg.png");
                background-size: cover;
                border-radius: 10px;
            }
            .s-info {
                flex: 1;
                height: 100%;
                background: #fff;
                .s-title {
                    padding: 10px;
                    font-size: 14px;
                    font-weight: bold;
                }
                .s-bottom {
                    display: flex;
                    justify-content: space-between;
                    padding: 8px 10px 0;
                    .s-price {
                        color: #1E80FF;
                    }
                    .s-count {
                        display: flex;
                        color: #999;
                    }
                }
            }
        }
    }

    .b {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 1200px;
        height: 60px;
        margin: 0 auto;
        border-bottom: 1px solid #DEDEDE;
        h3 {
            font-size: 24px;
        }
        p {
            font-size: 13px;
        }
    }

    .swiper-box {
        position: relative;
        width: 1200px;
        margin: 0 auto;
        .prev-btn,
        .next-btn {
            position: absolute;
            left: -50px;
            top: 50%;
            transform: translateY(-50%);
            width: 64px;
            height: 155px;
            background: url("../../public/images/prev-ico.png");
            background-size: 100% 100%;
        }
        .next-btn {
            left: auto !important;
            right: -50px;
            background: url("../../public/images/next-ico.png");
            background-size: 100% 100%;
        }
    }

    .swiper-container {
        height: 332px;
        width: 1100px;
        padding: 47px 0;
        margin: 0 auto;
        .swiper-slide img {
            width: 100%;
            height: 100%;
        }
        .swiper-button-prev,
        .swiper-button-next {
            color: #707070;
        }
    }

    ::-webkit-scrollbar {
        display: block;
        width: 3px;
        height: 1px;
        background: #485461;
    }

    ::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #fff;
    }

    /**
   媒体查询
    */
    @media screen and (max-width: 1500px) {
        .l-box {
            height: 480px !important;
        }
        .l-list {
            height: 395px;
            width: 900px;
        }
    }

    @media screen and (max-width: 750px) {
        .l-container {
            margin: 0;
        }
        .l-box {
            display: none;
        }
        .top,
        .b {
            width: 100% !important;
            padding-left: .4rem;
        }
        .l-content {
            padding-bottom: .4rem !important;
        }
        .service-item {
            width: 100% !important;
            padding: 0 .13rem !important;
            &:first-child {
                padding-left: .4rem !important;
            }
            .s-title {
                padding-bottom: 0 !important;
            }
            .s-bottom {
                flex-direction: column;
                padding-top: .32rem !important;
            }
        }
        .service-items {
            width: 100%;
            flex-wrap: initial;
            overflow-x: auto;
        }
        .s-cover {
            width: 4.26rem !important;
        }
        .swiper-box,
        .swiper-container {
            width: 100%;
        }
        .swiper-container {
            height: 4.26rem !important;
            padding: .4rem 0 0 0;
        }
        .next-btn,
        .prev-btn {
            display: none;
        }

    }
</style>
